CSS-loogiset ominaisuudet: Kansainvälisen asettelun tuen mullistaminen

Verkko on maailmanlaajuinen alusta, joka palvelee käyttäjiä, jotka puhuvat eri kieliä ja lukevat eri suuntiin. Perinteiset CSS-ominaisuudet, kuten left, right, top ja bottom, ovat luonnostaan fyysisiä ja sidottuja näytön suuntaan. Tämä aiheuttaa haasteita rakennettaessa asetteluja, jotka mukautuvat erilaisiin kirjoitustapoihin, kuten oikealta vasemmalle (RTL) -kieliin, kuten arabia ja heprea, tai pystysuuntaisiin kirjoitustapoihin, joita käytetään joissakin Itä-Aasian kielissä. CSS-loogiset ominaisuudet ovat tehokas ominaisuusjoukko, joka on suunniteltu vastaamaan näihin haasteisiin ja yksinkertaistamaan todella kansainvälisten verkkoasettelujen luomista.

Mitkä ovat CSS-loogiset ominaisuudet?

CSS-loogiset ominaisuudet korvaavat fyysiset ominaisuudet loogisilla ominaisuuksilla. Sen sijaan, että luotettaisiin kiinteisiin suuntiin, ne kuvaavat asettelua sisällön virtauksen kannalta. Tämä tarkoittaa, että määrittelet tyylit rivin alku- ja loppupään tai lohko- ja rivisisäisten suuntien perusteella sen sijaan, että luottaisit absoluuttisiin left-, right-, top- ja bottom-arvoihin. Selain kartoittaa sitten automaattisesti nämä loogiset ominaisuudet sopiviin fyysisiin ominaisuuksiin kirjoitustavan ja suunnan perusteella.

Ajattele asiaa näin: sen sijaan, että sanoisit "sijoita tämä elementti 10 pikselin päähän näytön vasemmasta reunasta", sanot "sijoita tämä elementti 10 pikselin päähän sisällön virtauksen alusta". Selain käsittelee sen, onko alku vasemmalla vai oikealla, kielen ja kirjoitustavan mukaan.

Avainkäsitteet: Rivisisäiset ja lohkosuunnat

Rivisisäisen ja lohkosuunnan ymmärtäminen on ratkaisevan tärkeää loogisten ominaisuuksien tehokkaassa käytössä.

• Rivisisäinen suunta: Tämä on suunta, jossa teksti virtaa rivin sisällä. Vasemmalta oikealle (LTR) -kielissä rivisisäinen suunta on vaakasuora, vasemmalta oikealle. Oikealta vasemmalle (RTL) -kielissä rivisisäinen suunta on myös vaakasuora, mutta oikealta vasemmalle. Pystysuuntaisissa kirjoitustavoissa rivisisäinen suunta on pystysuora.
• Lohkosuunta: Tämä on suunta, jossa tekstilohkot (kuten kappaleet) pinotaan. Useimmissa kielissä lohkosuunta on pystysuora, ylhäältä alas. Joissakin pystysuuntaisissa kirjoitustavoissa lohkosuunta voi kuitenkin olla vaakasuora.

Yleiset loogiset ominaisuudet ja niiden vastineet

Tässä on taulukko, jossa näkyy joitain yleisimmin käytettyjä loogisia ominaisuuksia ja niiden fyysisiä vastineita riippuen kirjoitustavasta ja suunnasta:

Tärkeä huomautus: Tämä taulukko havainnollistaa yleisen käsitteen. Todellinen kartoitus riippuu erityisistä kirjoitustavan ja suunnan asetuksista.

Käytännön esimerkkejä loogisten ominaisuuksien käytöstä

Esimerkki 1: Navigointipalkin tyylittely

Kuvittele, että luot navigointipalkkia, jonka on mukauduttava sekä LTR- että RTL-kieliin. Loogisia ominaisuuksia käyttämällä voit määrittää täytön ja marginaalit tavalla, joka mukautuu automaattisesti oikeaan suuntaan.

            
.nav-item {
  padding-inline-start: 1em; /* Vastaa padding-leftiä LTR:ssä, padding-rightiä RTL:ssä */
  padding-inline-end: 1em;   /* Vastaa padding-rightiä LTR:ssä, padding-leftiä RTL:ssä */
}

.nav-list {
  margin-inline-start: auto; /* Kohdistaa alkuun sekä LTR:ssä että RTL:ssä */
  margin-inline-end: 0;
}

            

              
                Copy
              
            
          

Tässä esimerkissä padding-inline-start ja padding-inline-end käyttävät automaattisesti oikeaa täyttöä tekstin suunnan perusteella. Samoin margin-inline-start: auto työntää navigoinnin säilön alkuun riippumatta siitä, onko se LTR vai RTL.

Esimerkki 2: Chat-käyttöliittymän tyylittely

Chat-käyttöliittymässä haluat usein näyttää viestejä eri käyttäjiltä näytön vastakkaisilla puolilla. Loogiset ominaisuudet voivat tehdä tästä paljon helpompaa hallita.

            
.message.user-1 {
  margin-inline-start: auto; /* Työnnä viestit käyttäjältä 1 loppuun (oikealle LTR:ssä, vasemmalle RTL:ssä) */
  text-align: inline-end;     /* Kohdista teksti loppuun */
}

.message.user-2 {
  margin-inline-end: auto;   /* Työnnä viestit käyttäjältä 2 alkuun (vasemmalle LTR:ssä, oikealle RTL:ssä) */
  text-align: inline-start;   /* Kohdista teksti alkuun */
}

            

              
                Copy
              
            
          

Tässä margin-inline-start: auto työntää viestit käyttäjältä user-1 säilön loppuun ja margin-inline-end: auto työntää viestit käyttäjältä user-2 alkuun. text-align -ominaisuus käyttää myös loogisia arvoja varmistaakseen oikean tekstin kohdistuksen.

Esimerkki 3: Korttiasettelun luominen reunuksilla

Kun luot korttiasettelua, saatat haluta lisätä reunuksen jokaisen kortin alkuun. Loogisia ominaisuuksia käyttämällä reunus näkyy automaattisesti oikealla puolella riippumatta kielestä.

            
.card {
  border-inline-start: 2px solid #000;
  padding: 1em;
}

            

              
                Copy
              
            
          

Tämä yksinkertainen CSS-sääntö varmistaa, että reunus on aina läsnä kortin sisältövirran alussa riippumatta siitä, luetaanko teksti vasemmalta oikealle vai oikealta vasemmalle.

Kirjoitustavat ja suunta

Jotta voit hyödyntää loogisia ominaisuuksia täysimääräisesti, sinun on ymmärrettävä, miten writing-mode- ja direction-ominaisuudet asetetaan. Nämä ominaisuudet ohjaavat tekstin virtauksen suuntaa ja asettelun suuntaa.

• writing-mode: Tämä ominaisuus määrittää, asetetaanko tekstirivit vaakasuoraan vai pystysuoraan. Yleisiä arvoja ovat:
• horizontal-tb: Vaakasuora, ylhäältä alas (oletus useimmille kielille)
• vertical-rl: Pystysuora, oikealta vasemmalle (yleinen Itä-Aasian kielissä)
• vertical-lr: Pystysuora, vasemmalta oikealle
• direction: Tämä ominaisuus määrittää tekstin suunnan rivin sisällä. Yleisiä arvoja ovat:
• ltr: Vasemmalta oikealle (oletus kielille, kuten englanti, espanja, ranska)
• rtl: Oikealta vasemmalle (käytetään kielille, kuten arabia, heprea, persia)

Tässä on esimerkki siitä, miten näitä ominaisuuksia voidaan käyttää arabiankielisen asettelun luomiseen:

            
body {
  direction: rtl;
  font-family: Arial, sans-serif; /* Varmista, että arabialle käytetään oikeaa fonttia */
}

            

              
                Copy
              
            
          

direction: rtl -asetuksen asettaminen body-elementtiin kääntää asettelun oikealta vasemmalle ja varmistaa, että kaikki loogiset ominaisuudet tulkitaan oikein arabialaista tekstiä varten. Haluat ehkä myös määrittää sopivan fontin arabialaiselle tekstille, kuten Arial, joka tukee arabialaisia merkkejä.

Loogisten ominaisuuksien käytön edut

CSS-loogisten ominaisuuksien käytöstä on useita merkittäviä etuja:

• Yksinkertaistettu kansainvälistäminen: Loogiset ominaisuudet yksinkertaistavat dramaattisesti asettelujen luomista, jotka mukautuvat erilaisiin kirjoitustapoihin ja suuntiin. Sinun ei enää tarvitse kirjoittaa erillisiä CSS-sääntöjä LTR- ja RTL-asetteluille.
• Lisääntynyt koodin ylläpidettävyys: Käyttämällä loogisia ominaisuuksia voit vähentää CSS-koodin määrää, jonka joudut kirjoittamaan ja ylläpitämään. Tämä tekee koodipohjastasi puhtaamman, järjestelmällisemmän ja helpomman ymmärtää.
• Parannettu luettavuus: Loogiset ominaisuudet ilmaisevat asettelutarkoituksesi selkeämmin. Sen sijaan, että määrittäisit fyysisiä suuntia, kuvaat asettelua sisällön virtauksen kannalta, mikä tekee koodistasi luettavampaa ja ymmärrettävämpää.
• Parannettu joustavuus: Loogiset ominaisuudet tarjoavat enemmän joustavuutta suunniteltaessa asetteluja, jotka mukautuvat eri näytön kokoihin ja laitteisiin.
• Tulevaisuuden varmistus: Web-teknologioiden kehittyessä loogiset ominaisuudet tarjoavat vankemman ja tulevaisuudenkestävämmän tavan määrittää asetteluja, mikä varmistaa, että koodisi toimii edelleen oikein eri ympäristöissä.

Selainten tuki

Useimmat modernit selaimet tarjoavat erinomaisen tuen CSS-loogisille ominaisuuksille, mukaan lukien Chrome, Firefox, Safari ja Edge. On kuitenkin aina hyvä idea tarkistaa uusimmat selaimen yhteensopivuustiedot sivustoilta, kuten Can I use... varmistaaksesi, että kohdeyleisösi voi tarkastella asettelujasi oikein.

Parhaat käytännöt loogisten ominaisuuksien käytössä

• Käytä loogisia ominaisuuksia johdonmukaisesti: Kun olet aloittanut loogisten ominaisuuksien käytön, yritä käyttää niitä johdonmukaisesti koko projektissasi. Tämä tekee koodistasi yhtenäisemmän ja helpommin ylläpidettävän.
• Testaa perusteellisesti: Testaa asettelujasi eri kirjoitustavoissa ja suunnissa varmistaaksesi, että ne toimivat oikein. Käytä selaimen kehittäjätyökaluja tarkastaaksesi lasketut tyylit ja varmistaaksesi, että loogiset ominaisuudet kartoitetaan oikeisiin fyysisiin ominaisuuksiin.
• Tarjoa varakeinoja (tarvittaessa): Jos sinun on tuettava vanhempia selaimia, jotka eivät tue loogisia ominaisuuksia, voit tarjota varakeinoja käyttämällä perinteisiä fyysisiä ominaisuuksia. Pidä kuitenkin mielessä, että tämä voi lisätä koodisi monimutkaisuutta.
• Ota huomioon saavutettavuus: Varmista, että asettelusi ovat vammaisten käyttäjien käytettävissä. Käytä sopivia ARIA-attribuutteja ja noudata saavutettavuusohjeita luodaksesi osallistavia malleja.
• Käytä CSS-nollausta: Selainten välisten yhteensopivuusongelmien minimoimiseksi aloita CSS-nollauksella normalisoidaksesi eri elementtien tyylit.

Johtopäätös

CSS-loogiset ominaisuudet ovat tehokas työkalu todella kansainvälisten verkkoasettelujen luomiseen. Hyödyntämällä näitä ominaisuuksia voit yksinkertaistaa koodiasi, parantaa ylläpidettävyyttä ja luoda asetteluja, jotka mukautuvat saumattomasti erilaisiin kirjoitustapoihin ja suuntiin, mikä tarjoaa paremman käyttökokemuksen maailmanlaajuiselle yleisölle. Verkon kehittyessä loogisista ominaisuuksista tulee yhä tärkeämpiä saavutettavien, osallistavien ja tulevaisuudenkestävien verkkosivustojen ja -sovellusten rakentamisessa.

Älä epäröi kokeilla loogisia ominaisuuksia projekteissasi. Aloita pienillä muutoksilla ja sisällytä ne vähitellen työnkulkuusi. Hyödyt kansainvälistämisen ja koodin ylläpidettävyyden suhteen ovat vaivan arvoisia.

Lisäresurssit

• MDN Web Docs: CSS-loogiset ominaisuudet ja arvot
• CSS-loogiset ominaisuudet ja arvot, taso 1
• Voinko käyttää... HTML5-, CSS3- jne. -tukitaulukoita